<template>
  <div class="home-container">
    <!-- 顶部状态栏 -->
    <van-nav-bar
      title="智慧医疗平台"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 健康生活横幅 -->
      <div class="health-banner">
        <div class="banner-content">
          <div class="banner-text">
            <h2>健康生活</h2>
            <h2>轻松简单</h2>
          </div>
          <div class="banner-image">
            <van-image
              src="https://img.yzcdn.cn/vant/cat.jpeg"
              width="80"
              height="80"
              fit="cover"
              round
            />
          </div>
        </div>
      </div>

      <!-- 快捷服务按钮 -->
      <div class="quick-services">
        <van-button
          type="primary"
          size="large"
          class="service-btn"
          @click="goToRegistration"
        >
          <van-icon name="calendar-o" size="20" />
          门诊挂号
          <div class="btn-subtitle">便民挂号服务</div>
        </van-button>
        
        <van-button
          type="success"
          size="large"
          class="service-btn"
          @click="goToPayment"
        >
          <van-icon name="gold-coin-o" size="20" />
          门诊缴费
          <div class="btn-subtitle">便民缴费服务</div>
        </van-button>
      </div>

      <!-- 公告区域 -->
      <div class="notice-section">
        <div class="notice-header">
          <van-icon name="volume-o" size="16" />
          <span>公告</span>
          <span class="notice-subtitle">智慧医疗助您健康上门服务</span>
          <van-icon name="arrow" size="12" class="arrow-right" />
        </div>
      </div>

      <!-- 功能网格 -->
      <div class="function-grid">
        <div class="grid-header">
          <span>门诊</span>
          <span>住院</span>
          <span>综合</span>
          <van-icon name="arrow" size="12" class="arrow-right" />
        </div>
        
        <van-grid :column-num="4" :gutter="10" class="service-grid">
          <van-grid-item
            v-for="item in serviceItems"
            :key="item.id"
            :text="item.text"
            @click="handleServiceClick(item)"
          >
            <template #icon>
              <div class="grid-icon" :style="{ backgroundColor: item.color }">
                <van-icon :name="item.icon" size="24" color="white" />
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 健康资讯 -->
      <div class="health-info">
        <div class="info-header">
          <span>健康资讯</span>
        </div>
        <div class="info-content">
          <p>出好预约挂号日，医院主治医师</p>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tabbar-container">
      <van-tabbar v-model="activeTab" @change="onTabChange">
        <van-tabbar-item icon="home-o" name="home">医疗服务</van-tabbar-item>
        <van-tabbar-item icon="search" name="search">智慧问诊</van-tabbar-item>
        <van-tabbar-item icon="friends-o" name="message">消息中心</van-tabbar-item>
        <van-tabbar-item icon="setting-o" name="profile">我的</van-tabbar-item>
      </van-tabbar>
    </div>

    <!-- 悬浮按钮 -->
    <van-floating-bubble
      axis="xy"
      icon="chat-o"
      @click="openChat"
      :style="{ right: '15px', bottom: '70px', width: '45px', height: '45px' }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

/**
 * 智慧医疗平台首页组件
 * 包含健康横幅、快捷服务、功能网格、底部导航等功能
 */

const router = useRouter()
const activeTab = ref('home')

/**
 * 服务功能项配置
 */
const serviceItems = ref([
  { id: 1, text: '门诊挂号', icon: 'calendar-o', color: '#4FC3F7' },
  { id: 2, text: '检验检查', icon: 'completed', color: '#81C784' },
  { id: 3, text: '自助开单', icon: 'edit', color: '#FFB74D' },
  { id: 4, text: '医技预约', icon: 'clock-o', color: '#F06292' },
  { id: 5, text: '预约挂号', icon: 'phone-o', color: '#9575CD' },
  { id: 6, text: '自助取药', icon: 'bag-o', color: '#4DB6AC' },
  { id: 7, text: '门诊导诊', icon: 'location-o', color: '#FF8A65' },
  { id: 8, text: '电子票据', icon: 'records', color: '#A1887F' }
])

/**
 * 点击左侧返回按钮
 */
const onClickLeft = () => {
  // 处理返回逻辑
  console.log('点击返回')
}

/**
 * 跳转到挂号页面
 */
const goToRegistration = () => {
  console.log('跳转到门诊挂号')
  // router.push('/registration')
}

/**
 * 跳转到缴费页面
 */
const goToPayment = () => {
  console.log('跳转到门诊缴费')
  // router.push('/payment')
}

/**
 * 处理服务项点击
 * @param item 服务项
 */
const handleServiceClick = (item: any) => {
  console.log('点击服务项:', item.text)
  
  // 根据不同服务项跳转到对应页面
  switch (item.text) {
    case '自助开单':
      // 跳转到自助开单须知页面
      router.push('/self-service-notice')
      break
    case '门诊挂号':
      console.log('跳转到门诊挂号页面')
      // router.push('/registration')
      break
    case '检验检查':
      console.log('跳转到检验检查页面')
      // router.push('/examination')
      break
    case '医技预约':
      console.log('跳转到医技预约页面')
      // router.push('/appointment')
      break
    case '预约挂号':
      console.log('跳转到预约挂号页面')
      // router.push('/booking')
      break
    case '自助取药':
      console.log('跳转到自助取药页面')
      // router.push('/medicine')
      break
    case '门诊导诊':
      console.log('跳转到门诊导诊页面')
      // router.push('/guidance')
      break
    case '电子票据':
      console.log('跳转到电子票据页面')
      // router.push('/receipt')
      break
    default:
      console.log('未知服务项:', item.text)
  }
}

/**
 * 底部导航切换
 * @param name 导航名称
 */
const onTabChange = (name: string) => {
  console.log('切换导航:', name)
  // 根据导航切换页面
  switch (name) {
    case 'home':
      // 当前页面，无需跳转
      break
    case 'search':
      console.log('智慧问诊功能开发中...')
      break
    case 'message':
      console.log('消息中心功能开发中...')
      break
    case 'profile':
      router.push('/profile')
      break
  }
}

/**
 * 打开聊天窗口
 */
const openChat = () => {
  console.log('打开智能客服')
}
</script>

<style scoped>
.home-container {
  height: 100%;
  max-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px; /* 为底部导航留出空间 */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 确保内容不会溢出手机屏幕 */
  max-width: 100%;
  box-sizing: border-box;
}

.content {
  padding: 0 12px;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 10px;
}

/* 健康生活横幅样式 */
.health-banner {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  border-radius: 12px;
  margin: 12px 0;
  padding: 16px;
  color: white;
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.banner-image {
  flex-shrink: 0;
}

/* 快捷服务按钮样式 */
.quick-services {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.service-btn {
  flex: 1;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  font-size: 14px;
}

.btn-subtitle {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.8;
}

/* 公告区域样式 */
.notice-section {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.notice-subtitle {
  flex: 1;
  color: #999;
  font-size: 12px;
}

.arrow-right {
  color: #ccc;
}

/* 功能网格样式 */
.function-grid {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.grid-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
}

.grid-header span:not(:last-child) {
  color: #333;
}

.grid-header span:last-child {
  margin-left: auto;
}

.service-grid {
  margin-top: 12px;
}

.grid-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

/* 健康资讯样式 */
.health-info {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.info-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 手机外框内适配 */
:deep(.van-nav-bar) {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #ebedf0;
}

/* 底部导航栏容器 */
.tabbar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.van-tabbar) {
  position: relative;
  background: #fff !important;
  border-top: 1px solid #ebedf0;
  width: 100%;
  height: 50px;
  z-index: 9999;
}

:deep(.van-floating-bubble) {
  position: absolute !important;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .content {
    padding: 0 10px;
  }
  
  .banner-text h2 {
    font-size: 16px;
  }
  
  .service-btn {
    height: 45px;
    font-size: 13px;
  }
  
  .health-banner {
    padding: 12px;
    margin: 8px 0;
  }
  
  .quick-services {
    margin: 8px 0;
  }
  
  .notice-section,
  .function-grid,
  .health-info {
    margin: 8px 0;
    padding: 10px;
  }
}
</style>